<!doctype html>
<html>
<head>
<script src="/blue/js/jquery.js"></script>
<link href="/blue/css/css.css" rel="stylesheet" type="text/css">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="format-detection" content="telephone=no" />
<title>蓝色保洁{{$fuwu}}</title>
<style>
/*service服务*/
.service_box{ height:48px; position:relative; margin-top:14px; padding-top:7px;box-sizing:border-box}
.service{width:92%; height:33px; line-height:33px; color:#191919; border:1px solid #d3d3d3; border-radius:3px; box-sizing:border-box; text-align:center; font-size:14px;margin:auto;}
.checkbox{ border:1px solid#01AFF0;}
.add_service{ clear:both; line-height:37px; height:37px; width:20%; margin-left:40%; position:relative; text-align:center;}
/*合计*/
.total_box{padding-top:24px; height:168px; box-sizing:border-box}
.total_box h1{ font-size:12px; text-align:center; line-height:18px; color:#65646b;}
.total_box p{ font-size:22px; color:#c40000; text-align:center; line-height:33px;}
/*address地址*/
.address{ padding-left:4%; position:relative; background-color:#fff; padding-top:9px; padding-bottom:9px; box-sizing:border-box}
.address img{ float:left; margin-top:14px; width:18px; height:auto}
.address_text{ float:left; margin-left:12px;}
.address h1{ font-size:14px; line-height:21px; color:#191919;}
.address h2{ font-size:14px; line-height:18px; color:#65646b;}
.address h3{ font-size:14px; line-height:18px; color:#b2bab8;}
/***********选择服务时间:弹出层**********/
#option_time{ width:100%; height:100%; top:0; right:0; position:absolute; background:#fff;}
.week_box{ height:62px; background-color:#fff; position:relative; margin-bottom:8px;}
.week{ height:62px; width:14.3%; float:left}
.week h1{ line-height:22px; font-size:14px; text-align:center; margin-top:11px;}
.week h2{ line-height:19px; font-size:12px; color:#65646b; text-align:center;}
.blue{ width:14.3%; position:absolute; left:0; bottom:0; height:2px; background-color:#01aff0;}
.time_box{ margin-bottom:80px;}
.time{ width:20%; float:left; margin-left:4%; margin-top:6px; border:1px solid #ccc; border-radius:3px; text-align:center; line-height:40px; height:40px; color:#b2bab8; box-sizing:border-box;}
.option {
    border: 1px solid #01aff0;
    color:#191919;
    background-image:url(/blue/images/checkbox.png);
    background-size: 12px 12px;
    background-position: right bottom;
    background-repeat: no-repeat;
}
/*保洁剂弹出层*/
.detergent{ position:absolute; width:100%; height:100%; top:0px; left:0px; z-index:2000; background:#fff;}
.hot_title{height:20px; line-height:20px; color:#65646b; padding-left:14px; box-sizing:border-box; position:relative; font-size:14px; background-color:#f9f9f9;}
.agentia_box{ width:100%; position:relative; float:left}
.agentia{ height:75px; background-color:#fff; position:relative}
.agentia_img{ width:47px; height:47px; margin-left:4%; background-color:#737cd9; float:left; margin-top:14px;}
.agentia_text{ float:left; margin-left:13px;}
.agentia_text h1{ font-size:14px; line-height:18px; color:#191919; margin-top:11px;}
.agentia_text h2{ font-size:12px; line-height:16px; color:#65646b;}
.agentia_text h3{ font-size:14px; line-height:18px; color:#c40000;}
.reduce,.add{ width:20px; height:20px; position:absolute;right:14px;top:27px;}
.amount{ width:20px; height:20px; position:absolute; right:14px; top:27px; color:#191919; line-height:20px; text-align:center}
/*cart底部购物车*/
.cart_box{ position:absolute; bottom:0; left:0; background-color:#f9f9f9; width:100%;}
.cart_title{ padding-left:4%; line-height:33px; color:#191919; position:relative; background-color:#fff;}
.cart_pro{ height:42px;}
.cart_pro h1{ float:left; line-height:42px; margin-left:4%; color:#191919;}
.cart_pro h2{ float:left; line-height:42px; margin-left:20%; color:#c40000; }
.cart_pro img{ float:right; width:20px; height:auto; margin-top:11px;}
.cart_pro p{ float:right; width:25px; height:20px; margin-top:11px; color:#191919; text-align:center}
.cart{ height:47px; position:relative; margin-top:16px; background-color:#fff;}
.cart img{ width:46px; height:46px; position:absolute; left:4%; bottom:17px;}
.sure{ float:right; width:25%; height:47px; background-color:#999; color:white; line-height:47px; text-align:center; font-size:18px;}
.cart p{ color:#c40000; font-size:18px; line-height:47px; float:right; margin-right:6px;}
.cart h1{ color:#191919; font-size:14px; line-height:47px; float:right}
.number{ position:absolute; left:4%; top:-15px; margin-left:34px; height:18px; width:18px; background-color:#c40000; border-radius:50%; line-height:18px; text-align:center; color:white; font-size:12px;}
.margin{ margin-top:16px;}
</style>
</head>

<!--header顶部标题-->
<div class="header"><span id="ric">{{$fuwu}}</span>
	<div class="header_left"  onclick="window.history.go(-1)"><img src="/blue/images/return.png"></div>
    <div class="header_right" id="open_sta" onClick="statement()">免责声明</div>
</div>
@if($cha == '')
<!--column服务地址-->
<div class="column_box" onclick="document.location='address?ii=hu & fuwu=<?php echo $fuwu?>';">
	<div class="column_img"><img src="/blue/images/adrress.png"></div>
    <p>请选择服务地址</p>
    <div class="next"><img src="/blue/images/arrow.png"></div>
    <div class="border_bottom"></div>
</div>
<div class="margin"></div>
@else
<!--leather皮具座数-->
<div class="leather">
	<div class="border_top"></div>
	<div class="leather_text">
        <h1>{{$fuwu}}面积：</h1>
        <h2><span id="mj">{{$kan->money}}</span>元/㎡，50㎡起</h2>
    </div>
    <input placeholder="输入面积" id="number" onkeyup="this.value=this.value.replace(/\D/g,'')"></input>
    <p class="unit">㎡</p>
    <div class="border_bottom"></div>
</div>
<!--选取地址后的服务地址，先隐藏，选取地址后显示-->
<div class="address" onclick="document.location='address?ii=hu';">
	<div class="border_top"></div>
    <img src="/blue/images/adrress.png">
    <div class="address_text">
        <span id="dizhi"><h1>{{$kan->city}}  {{$cha->community}}</h1></span>
        <h2><span id="diz">{{$cha->address}}</span>&nbsp;&nbsp;&nbsp;&nbsp;<span id="lxr">{{$cha->contact}}</span>&nbsp;&nbsp;&nbsp;&nbsp;<span id="dianhua">{{$cha->tel}}</span></h2>
        <h3><span id="ping">未选择多少平米</span>，<span id="xiao">两个小时</span>，{{$kan->money}}元/小时/人</h3>
    </div>
    <div class="clearfix"></div>
    <div class="border_bottom"></div>
</div>
@endif
<!--column服务时间-->
<div class="margin"></div>
<div class="column_box column_ron">
	<div class="column_img"><img src="/blue/images/time.png"></div>
    <p id="atext">请选择服务时间</p><span id="btext" style="margin-left:10px; color:#65646b"></span>
    <div class="next"><img src="/blue/images/arrow.png"></div>
    <div class="border_bottom"></div>
    <div class="border_top"></div>
</div>
<!--service_box服务-->
<div class="service_box">
	<div class="service checkbox" style=" border:1px #01AFF0 solid; background:#fff;">服务标准
    </div>
</div>
<!--service_cost服务费用-->
<div class="service_cost" >合计：
	<p style=" font-size:14px;color:#c40000;">￥<span id="cost" >0</span></p>
   
</div>
<!--confirm提交订单-->
<div class="confirm_box">
	<div class="confirm" id="tj">提交订单</div>
</div>
<!--免责声明-->
<div class="black" id="black"></div>
<div class="statement" id="statement">
	<div class="statement_header">免责声明
    	<div class="border_bottom"></div>
    </div>
    <img class="close" onClick="close_sta()" src="/blue/images/close.png">
    <div class="statement_text">
    	<h1>1.什么是优惠券？</h1>
        <p>优惠券的获得？优惠券的获得？优惠券的获得？优惠券的获得？</p>
    </div>
    <div class="statement_text">
    	<h1>2.优惠券如何使用？</h1>
        <p>优惠券的获得？优惠券的获得？优惠券的获得？优惠券的获得？</p>
    </div>
    <div class="statement_text">
    	<h1>3.如何获得优惠券？</h1>
        <p>优惠券的获得？优惠券的获得？优惠券的获得？优惠券的获得？</p>
    </div>
    <div class="statement_text">
    	<h1>4.什么是优惠券</h1>
        <p>优惠券的获得？优惠券的获得？优惠券的获得？优惠券的获得？</p>
    </div>
    <div class="statement_text">
    	<h1>5.什么是优惠券</h1>
        <p>优惠券的获得？优惠券的获得？优惠券的获得？优惠券的获得？</p>
    </div>
    <div class="statement_text">
    	<h1>6.什么是优惠券</h1>
        <p>优惠券的获得？优惠券的获得？优惠券的获得？优惠券的获得？</p>
    </div>
</div>
<!--服务标准-->
<div class="standard">
	<div class="standard_header">服务标准
    	<div class="border_bottom"></div>
    </div>
    <img class="close" onClick="close_sta()" src="/blue/images/close.png">
    <div class="standard_text">
    	<h1>窗户</h1>
        <p>窗户玻璃无污尘，窗槽干净，无污痕</p>
    </div>
    <div class="standard_text">
    	<h1>客厅及茶几</h1>
        <p>沙发靠垫、靠枕摆放整齐，底部清扫干净，无毛发、无杂物，茶几内茶具摆放整齐，茶水桶倾倒干净，烟灰缸倾倒、刷洗干净后，垫纸、滴水沾湿</p>
    </div>
    <div class="standard_text">
    	<h1>地面</h1>
        <p>地面干净、无水痕、无污痕。玩具、鞋子、凳子等物品要挪起清洁后整齐归位</p>
    </div>
    <div class="standard_text">
    	<h1>鞋柜</h1>
        <p>鞋子统一朝向摆放整齐</p>
    </div>
    <div class="standard_text">
    	<h1>5.什么是优惠券</h1>
        <p>优惠券的获得？优惠券的获得？优惠券的获得？优惠券的获得？</p>
    </div>
    <div class="standard_text">
    	<h1>垃圾桶</h1>
        <p>垃圾桶倾倒后，刷洗干净，套上干净的塑料袋</p>
    </div>
</div>
<!-------------请选择服务时间：弹出层------------->
<div id="option_time">
    <!--header顶部标题-->
    <div class="header">请选择上门时间 </div>
    <div class="week_box">
        @foreach ($date as $ks=>$vs)
            <div class="week"  style="width:14.2%;">
                <h1>{{ $ks }}</h1>
                @if(!empty($time[$ks]))
                    <h2>可约</h2>
                @else
                    <h2>约满</h2>
                @endif
            </div>
        @endforeach
        <div class="blue"></div>
        <div class="border_bottom"></div>
    </div>
    <?php $a=1;?>
    @foreach($tsj as $k)
        @if($a==1)
            <div class="time_box"  id="option_box<?php echo $a?>">
                @else
                    <div class="time_box" style="display: none"  id="option_box<?php echo $a?>">
                        @endif
                        @foreach($k as $aa => $as)
                            @if( $as == 1)
                                <div class="time " style="pointer-events:none;" >{{ $aa }}这个时间被约了</div>
                            @elseif( $as == 0)
                                <div class="time" >{{ $aa }}</div>
                            @endif
                        @endforeach
            </div>
            <?php $a++;?>
     @endforeach

     
    <!--confirm提交订单时间-->
    <div class="confirm_box">
        <div class="confirm" style=" background-color:#FF7F00">确定</div>
    </div>  
</div>
<script>
      @if($cha != ''){
        setInterval(function(){
            var number=parseInt(document.getElementById("number").value);//找到number输入框转化为数字
            var   cost=parseInt(document.getElementById("cost").innerHTML);//找到cost总价格转化为数字
                document.getElementById("cost").innerHTML=+number*{{$kan->money}};//总价格变动

            if(isNaN(number)){document.getElementById("cost").innerHTML=0;}
            if(cost>0){$(".confirm").css("background-color","#FF7F00")}
            },100) }
       @endif
//隐藏免责声明、服务标准
document.getElementById('black').style.display="none";
document.getElementById('statement').style.display="none";
//点击免责声明按钮，显示免责声明
function statement(){
    document.getElementById('black').style.display="block";
    document.getElementById('statement').style.display="block";
    }
//点击关闭按钮，关闭免责声明
function close_sta(){
    document.getElementById('black').style.display="none";
    document.getElementById('statement').style.display="none";
    $(".standard").hide();
    }
$(".service").click(
    function(){
        $(this).toggleClass("checkbox");
        }
)
//隐藏服务地址
// $(".address").hide();
$(".standard").hide();
//点击基础服务
$(".service").eq(0).click(
    function(){
        document.getElementById('black').style.display="block";
        $(".standard").show();
        }
)


   //选择时间弹出层
          <?php $aaa=[]; $bbb=[];
          foreach($date as $k=>$v){           //将日期取出来
              $aaa[]=$k;                       //将日期赋值给$aaa数组
              foreach ($v as $ks=>$vs){       //将时间段取出来
                  $bbb[] = $ks;                  //将时间段接收
              }
          }

          ?>

      var  ajson = '{!! json_encode($aaa) !!}';           //将数组里面的值变成json数据赋值给ajson变量
      var ar = JSON.parse(ajson);                         //将json里面的数据解析赋值给ar
      var articlesJsons = '{!! json_encode($bbb) !!}';    //跟上面两个的操作一样
      var arr = JSON.parse(articlesJsons);
      var atext=document.getElementById("atext");
      var btext=document.getElementById("btext");
      var        week=document.getElementsByClassName("week");
      var        time=document.getElementsByClassName("time")
      //隐藏选择时间
      var off=1;
      $("#option_time").hide();
      $(".column_ron").click(
          function(){$("#option_time").show();
              if(off){ atext.innerHTML='请选择日期';btext.innerHTML='请选择时间';off=0;}
          })
      //显示选择时间
      $(".confirm").click(function(){$("#option_time").hide()})//隐藏选择时间
      $(".header_left").click(function(){$("#option_time").hide()})
      //选择几号:点击日期，边框滑动
          <?php
          $bai=0;  $baifen=0;     $riqi=0;    //判断有几天
          foreach ($date as $k=>$v){
          $baifen++;?>
      var wk=$('.week:eq({{$riqi}})').find('h2').text();
      if(wk=='约满'){
          wk=$('.time_box:eq({{$riqi}})').html("<center><h1>'不要看了这一天已经约满了'</h1><h2>'抱歉这一天已经约满了请你赶紧约下一天吧不然下一天也要被约满了'</h2><h1>'小崽子看什么看还不赶快约下一天'<h1><center");
      }
      $(".week:eq({{$riqi}})").click(function(){$(".blue").animate({left:"{{$bai}}%"});hides();$("#option_box{{$baifen}}").show();})
          <?php $riqi++;$bai=($bai+14.3); }?>
      for(i=0;i<week.length;i++){
          week[i].index=i;
          week[i].onclick=function(){
              atext.innerHTML="<p>"+ar[this.index]+"</p>";
          }
      }


      function hides(){
          <?php $a=1;?>
          @foreach($date as $k=>$s)
          $('#option_box{{$a}}').hide();
          <?php $a++;?>
          @endforeach
      }

      //选择具体时间
          <?php $kek=1;?>
              @foreach($date as $k)
      var option_box=document.getElementById("option_box{{$kek}}");
      var time{{$kek}}=option_box.getElementsByTagName("div");
      $(time{{$kek}}).click(function(){$(this).addClass("option").siblings().removeClass("option");})
      for(x=0;x<time{{$kek}}.length;x++){
          time{{$kek}}[x].index=x;
          time{{$kek}}[x].onclick=function(){
              btext.innerHTML="<span>"+arr[this.index]+"</span>";
          }
      }
      <?php $kek++;?>
      @endforeach

    $('#number').click(function () {
        var a=$('#mj').text();
        if(a == '你的地址不在服务区'){
            alert('你的地址不在服务区请重新选择');
            location.href="address?ii=hu'"
        }
    });

      $("#tj").click(function () {
          var pf = $("#number").val();
          var xs = $("#btext").text();
          var as = $("#atext").text();
          var hj = $("#cost").text();
          var ric = $("#ric").text();
          var lxr = $("#lxr").text();
          var dianhua = $("#dianhua").text();
          var dizhi = $("#dizhi").text();
          var diz = $("#diz").text();
          if(pf == '' ){
              alert('请选择多少平米');
          }else if(pf == ''){
              alert('请选择你的服务地址');
          }else if(xs == '' || xs == '请选择时间' || as=='请选择日期'){
              alert('你还没选择时间');
          }else if(pf != '未选择多少平米' || pf != '' || xs != '' || xs != '请选择时间' || as=='请选择日期'){
              var ding=[
                  area = pf,                       //面积
                  publishedtime = as+'  '+xs,      //详细时间
                  money = hj,                      //需要付的金额
                  content = ric,                   //订单类型
                  contact = lxr,                   //联系人
                  tle =dianhua,                    //联系方式
                  address_pid = dizhi+'  '+diz,    //用户的详细地址
                  rq = as,
                  xis = xs
              ];
              $.post('myorder',{ding},function (res) {
                      @if(!session('name')){
                      alert('你的登录过期了请重新登录');
                  }@else{
                      if (res == 11) {
                          alert('预约成功请付款');
                          location.href = 'myorder';
                      }
                      else if(res == 12)
                      {
                          alert('你设备不行 返回的速度太慢 已被人抢先预约 刷新查看 还可以预约的时间');
                      }
                      else if(res == 13)
                      {
                          alert('你的运气绝了有人比你快');
                      }
                      else
                      {
                          alert('预约失败请先登录谢谢');
                      }
                  }
                  @endif;
              })
          }
      });
</script>
</body>
</html>